<section>
<h1>Plugins</h1>
<p>Plugins are a way to package additional functionality into jmpress.js.</p>


<h2>Default Plugins</h2>
<p>jmpress.js comes loaded with a default set of plugins to handle the common uses.</p>

<h3>Translate, Scale &amp; Rotate</h3>
<p>This default plugin handles the transformation stuff.</p>

<h3>Active Class</h3>
<p>This default plugin handles the toggling of activeClass and nestedActiveClass.</p>

<h3>Circular Stepping</h3>
<p>This default plugin handles the natural flow of the steps, taken from the dom order.</p>

<h3>Starting Step</h3>
<p>This default plugin handles the config option "start".</p>

<h3>Routing</h3>
<p>This default plugin handles the data-next and data-prev attributes and the route command.</p>

<h3>Ajax Load Steps</h3>
<p>This default plugin enables you to load step via ajax.
It handles the data-src and href attribute and offers the "afterStepLoaded" event.</p>

<h3>Hash in URL</h3>
<p>This default plugin handles updates to and change events from the url hash.
It also handles clicks on link to other steps.</p>

<h3>Keyboard Navigation</h3>
<p>This default plugin handles navigation with the keyboard.</p>

<h3>Viewport</h3>
<p>This default plugin handles camera zooming to window size.</p>

<h3>Clickable Inactive Steps</h3>
<p>This default plugin handles click on other steps.</p>

<h3>Templates</h3>
<p>This default plugin handles templates.
It handles the data-template attribute and registers the template.</p>
</section>

<section>
<h2>Extra Plugins</h2>
<p>jmpress.js also comes with extra plugins located in the /plugins folder that
you might choose to use. To load the plugin simply add a script tag including
the plugin js file.</p>

<h3>Duration</h3>
<p>For automatically changing steps after a given duration.
Can also use a progress bar indicating how long until the change will occur.
It handles the data-duration and data-duration-action attributes.
Adds the following config options to jmpress:</p>

<h4>duration.barSelector</h4>
<p>A jQuery selector to the bar element on which a property should be changed.</p>

<h4>duration.barProperty, duration.barPropertyStart, duration.barPropertyEnd</h4>
<p><em>Default: "width", "0", "100%"</em><br />
Set to property and property values which should be changed.
The values are set in on step, so transition should be enabled on element.</p>

<h4>duration.defaultAction</h4>
<p><em>Default: "next"</em><br />
The action that should be executed if no data-duration-action is defined.</p>

<h4>duration.defaultValue</h4>
<p>The duration that should be taken if no data-duration is defined.</p>

<h3>Secondary</h3>
<p>Documentation coming soon.</p>
</section>

<section>
<h2>Writing a Plugin</h2>
<p>To extend jmpress.js, simply create a new js file and then add the script to
your website or presentation HTML. It is wise to wrap your plugin within a
closure:</p>

<pre><code>(function( $, document, window, undefined ) {
	// Plugin Code Will Go Here
})(jQuery, document, window);</code></pre>

<p>Now we can add a new option to jmpress by using the defaults method:</p>

<pre><code>(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
})(jQuery, document, window);</code></pre>

<p>Now the config option 'withMeat' will be settable when initiating jmpress
and will default to 'Yum! Meat!'. Let's go further and add some more meat to our
plugin:</p>

<pre><code>(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
	function meat( step, what ) {
		$(step).html( what );
	}
	$.jmpress('initStep', function( step, eventData ) {
		meat( step, eventData.settings.withMeat );
	});
})(jQuery, document, window);</code></pre>

<p>We have created a 'meat' method available only within our plugin. Then we are
calling this method as each step is initialized to replace the HTML in every
step to 'Yum! Meat!'.</p>

<p>You can add your own events to jmpress using the 'register' method and then
call it upon an event:</p>

<pre><code>(function( $, document, window, undefined ) {
	$.jmpress("defaults").withMeat = 'Yum! Meat!';
	$.extend(true, $.jmpress('defaults').keyboard.keys, {
		77: 'meat' // 'm' key for meat
	});
	$.jmpress("register", "meat", function() {
		var step = $(this).jmpress('active')
		step.html( $(this).jmpress("settings").withMeat );
	});
})(jQuery, document, window);</code></pre>

<p>With this plugin, any time the 'm' key is pressed the active slide HTML will
be replace with 'Yum! Meat!'.</p>

<p>Take a look at the core plugins in jmpress.js or the extra plugins in the
/plugins folder for more examples.</p>

<p>If you have written a plugin for jmpress.js please let us know!</p>

<p>More documentation coming soon...</p>
</section>